<template>
	<div class="box">
    <el-card class="box-card">
      <search-form :searchData='searChonfig.searchData' @tabList='tabList' :showReset='searChonfig.showReset'>
        <el-button class="add_btn" slot="button-danger" type="danger" @click="createdFlow">新建流程</el-button>
        <!-- <el-button slot="button-pri" type="warning">插槽按钮</el-button> -->
      </search-form>
    </el-card>
		<el-card class="box-card">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%">
        <el-table-column type="expand">
          
          <template slot-scope="props">
            <div class="box1">
              <el-card class="box-card">
                <el-table
                  :data="props.row.processTemplateList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="processTemplateKey"
                    label="流程ID"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="version"
                    label="版本号"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="创建时间">
                  </el-table-column>
                  <el-table-column
                    prop="updateTime"
                    label="最新修改时间">
                  </el-table-column>
                  <el-table-column
                    label="启用状态">
                    <template slot-scope="scope">
                      <span> {{scope.row.isUsing? '启用':'未启用'}} </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="250">
                    <template slot-scope="scope">
                      <span class="text_btn" @click="lookTemp(props.row.name,scope.row.processTemplateKey)"> 查看 </span>
                      <span class="text_btn"> 编辑 </span>
                      <!-- <span class="text_btn"> 发布 </span> -->
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </template>
            
          
        </el-table-column>
        <el-table-column
          label="主体"
          prop="businessType">
        </el-table-column>
        <el-table-column
          label="流程名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="description">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <span class="text_btn" @click="lookNew(scope.row)"> 查看 </span>
            <span class="text_btn" @click="editNew(scope.row)"> 修改 </span>
            <el-badge is-dot class="item" v-show="scope.row.release">
              <span class="text_btn" > 发布 </span>
            </el-badge>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <div class="pag_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalList">
          </el-pagination>
        </div>
        
      </div>
    </el-card>
    <!-- 创建流程表单 -->
    <el-dialog title="流程创建" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="流程名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="流程主体" :label-width="formLabelWidth" prop="subject">
          <el-select v-model="ruleForm.subject" placeholder="请选择流程主体" style="width:100%">
            <el-option label="订单" value="订单"></el-option>
            <el-option label="工单" value="工单"></el-option>
            <el-option label="请假" value="请假"></el-option>
            <el-option label="入职" value="入职"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作权限" :label-width="formLabelWidth" prop="power">
          <el-select v-model="ruleForm.power" placeholder="请选择操作权限" style="width:100%">
            <el-option label="供应商" value="1"></el-option>
            <el-option label="开发人员" value="2"></el-option>
            <el-option label="客户" value="3"></el-option>
            <el-option label="管理员" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程描述" :label-width="formLabelWidth" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="box_btn"> 
            
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div> -->
    </el-dialog>
    
	</div>
</template>
<script>
import searchForm from '../components/searchForm/search.vue'
import { createProcessMajor, queryProcessMajorList } from "@/plugins/api.js";
export default {
	components: {
		searchForm,
	},
	data() {
		return {
			searChonfig: { // 搜索配置
        showReset: true, // 是否显示重置按钮,默认不显示。 如果显示Reset
        searchData: [ // 搜索条件 （汉语）或 汉字或图片或文件夹名称或文件名称或MD5值或文件大小写字母组合。 大小写敏感。 匹配应产生最高分数。 匹配不应产生低分数。 按照文件大小进行排序。 按照文件夹排序。 按照文件名排序。 按照MD5值排序。 如果没有文件夹或文件夹
          {
            cell: 4,
            type: 'SELECT',
            lableName: '主体',
            value: '',
            option: [
              {name: '订单', value: '1'},
              {name: '请假', value: '2'},
              {name: '工单', value: '3'},
              {name: '入职', value: '4'},
            ],
            name: 'zhuti',
            place: '请选择主体'
          },
          // {
          //   cell: 4,
          //   type: 'SELECT',
          //   lableName: '启用状态',
          //   value: '',
          //   option: [
          //     {name: '已启用', value: '1'},
          //     {name: '已停用', value: '2'},
          //   ],
          //   name: 'zhuangTai',
          //   place: '请选择启用状态'
          // },
          {
            cell: 4,
            type: 'INPUT',
            lableName: '流程名称',
            value: '',
            name: 'name',
            place: '请输入流程名称'
          },
          
          // {
          //   cell: 4,
          //   type: 'RADIO',
          //   lableName: '单选问题',
          //   value: '',
          //   option: [
          //     {name: '上海', value: '1'},
          //     {name: '北京', value: '2'}
          //   ],
          //   name: 'radio',
          //   place: '请选择'
          // },
         
          // {
          //   cell: 4,
          //   type: 'SELECT',
          //   lableName: '是否含有未发布',
          //   value: '',
          //   option: [
          //     {name: '是', value: '1'},
          //     {name: '否', value: '2'}
          //   ],
          //   name: 'fabu',
          //   place: '请选择是否含有未发布'
          // }

          {
            cell: 4,
            type: 'TIME',
            lableName: '开始时间',
            value: '',
            name: 'startTime',
            place: '开始时间'
          },
          {
            cell: 4,
            type: 'TIME',
            lableName: '结束时间',
            value: '',
            name: 'endTime',
            place: '结束时间'
          }
        ]
      },
      tableData1: [],
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalList: 0,
      dialogFormVisible: false,
      ruleForm: {
        name: '',
        subject: '',
        power: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        subject: [
          { required: true, message: '请选择流程主体', trigger: 'change' }
        ],
        power: [
          { required: true, message: '请选择操作权限', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写流程描述', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px'
		};
	},
  computed:{
    
  },
	created() {
		
	},
  mounted() {
    this.getList()
  },
	methods: {
    getList(){
      let params = {
        pageNum:this.currentPage,
        pageSize:this.pageSize
      }
      queryProcessMajorList(params).then((data)=>{
        console.log(data,'--------列表-------------')
        this.tableData = data.records
        this.totalList = data.total
    })
    },
    tableRowClassName({row, rowIndex}) {
      if(row.release) {
        return 'warning-row';
      }
      // if (rowIndex === 1) {
      //   return 'warning-row';
      // } else if (rowIndex === 3) {
      //   return 'success-row';
      // }
      return '';
    },
    // expandChange(row) {
    //   this.tableData1 = row.processTemplateList
    // },
		tabList (item) {
      console.log(item, '父组件拿到数据')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getList()
    },
    createdFlow(){
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            businessType : this.ruleForm.subject,
            description : this.ruleForm.desc, 
            name : this.ruleForm.name
          }
          createProcessMajor(params).then((data)=>{
            if(data){
              this.$router.push({
                name: 'setting',
                query: {
                  name: this.ruleForm.name,
                  key: data
                }
              });
            }
            
          })
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    lookNew(data){// 外层列表查看
      if(data.processTemplateList.length>0){
        this.$router.push({
          name: 'setting',
          query: {
            name: data.name,
            tempKey: data.processTemplateList[0].processTemplateKey
          }
        });
      }else{
        this.$message.error('当前流程下无可查看模板');
      }
      
    },
    // 查看模板
    lookTemp(name,key){
      this.$router.push({
        name: 'setting',
        query: {
          name: name,
          tempKey: key
        }
      });
    },
    // 编辑模板
    editNew(data){
      if(data.processTemplateList.length>0){
        this.$router.push({
          name: 'setting',
          query: {
            name: data.name,
            editKey: data.processTemplateList[0].processTemplateKey,
            listId: data.id
          }
        });
      }else{
        this.$message.error('当前流程下无可编辑模板');
      }
    },
	}
};
</script>
<style scoped>
  .box{
    background: #e6e6e6;
    overflow: hidden;
    margin-top: -60px;
  }
  .box1{
    background: #e6e6e6;
    padding: 10px;
  }
  .box-card{
    width: 96%;
    margin: 20px auto;
  }
  .add_btn{
    background: #F56C6C !important;
  }
  .text_btn{
    cursor: pointer;
    margin-right: 10px;
    color: #46A6FE;
  }
  /deep/ .el-card__body, .el-main{
    padding: 10px !important;
  }
  .block{
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .box_btn{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
  /deep/.warning-row {
    background: rgb(253, 241, 217) !important;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  /deep/.el-badge__content.is-fixed.is-dot{
    right: 14px;
    top: 5px;
  }
</style>